<template>
  <div v-loading="pageLoading" class="wrap pb_10">
    <div class="header">道馆选择</div>
    <div class="sub_header">请选择您要登录的道馆</div>
    <div class="ovf_scroll ox_scroll">
      <div class="tab_content">
        <div
          v-for="(item, index) in ouList"
          :key="index"
          :class="['tab_item', item.id === currentOUid ? 'light' : '']"
          @click="changeOU(item)"
        >
          <p class="club_name" :title="item.displayName">{{ item.displayName }}</p>
          <img class="logo_img" :src="getStaticFileUrl(item.logoUrl)" alt="" srcset="">
          <img v-show="item.id === currentOUid" class="choose_img" src="@/assets/images/hall/clubChoose_icon.png" alt="">
        </div>
      </div>
    </div>
    <div v-if="isShowContent && currentOUid" class="choose_box">
      <div v-if="ouEdition" class="choose_btn bg_blue" @click="jumpToHall">
        <div class="text">进入道馆系统</div>
        <i class="el-icon-right mr_5" />
      </div>
      <div v-else class="choose_btn bg_orange" @click="showDialog()"><div class="text">续 费</div><i class="el-icon-right mr_5" /></div>
    </div>
    <buyVersionDialog ref="buyVersionDialog" />
  </div>
</template>

<script>
// 获取组织机构列表
import { api_GET_ClubSettingClubs } from '@/extend/api/hall.js';

import { getTenantId } from '@/lib/auth';

import buyVersionDialog from './buyVersionDialog.vue';

export default {
  components: {
    buyVersionDialog
  },
  data () {
    return {
      pageLoading: false,
      isShowContent: false,
      ouList: [],
      currentOUid: ''
    };
  },
  computed: {
    currentUserInfo () {
      return this.$store.state.user.info || {};
    },
    ouEdition () {
      const _ouEdition = this.currentUserInfo.organizationUnitEdition;
      return _ouEdition && _ouEdition.isValid;
    }
  },
  created () {
    this.getOuList();
    this.getCurrentOUid();
  },
  methods: {
    getCurrentOUid () {
      this.currentOUid = this.$store.state.user.currentOU;
    },
    getOuList () {
      this.isShowContent = false;
      api_GET_ClubSettingClubs()
        .then(
          res => {
            this.isShowContent = true;
            const _list = res || [];
            this.ouList = _list.filter(item => item.typeCode === 'Club');
            // 如果只有一个道馆，且拥有道馆版本。那么直接进入道馆
            if (this.ouList.length && this.ouList.length === 1 && this.ouEdition) {
              this.jumpToHall();
            }
          }
        )
        .catch(
          error => {
            this.isShowContent = true;
            this.$message({
              message: `版本列表获取失败 ${error.error.message}`,
              type: 'error',
              showClose: true
            });
          }
        );
    },
    async changeOU (data) {
      this.pageLoading = true;
      await this.$store.dispatch('user/setCurrentOUID', data.id);
      await this.$store.dispatch('app/setIsGetBadge', false);
      // 获取用户信息
      await this.$store.dispatch('user/getInfo');
      await this.$store.dispatch('user/getFirstOrg');
      // 获取用户顶级机构列表
      await this.$store.dispatch('user/getRootUnits');
      this.getCurrentOUid();
      this.pageLoading = false;

      if (this.ouEdition && this.ouEdition.isValid) {
        this.jumpToHall();
      }
      return true;
    },
    jumpToHall () {
      const _tenantId = getTenantId() || '';
      window.location.href = `${window.location.origin}/hall.html#/t__${_tenantId}`;
    },
    showDialog () {
      this.$refs.buyVersionDialog.changeVisible();
    },
    // 上传图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return require('@/assets/images/face_default.png');
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>

<style lang="scss" scoped>
.wrap {
  box-sizing: border-box;
  width: 1240px;
  min-height: calc(100vh);
  padding: 90px 0 0 0;
  margin: 0 auto;
  background-image:url(../../assets/images/hall/clubChoose_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 150px;
}
.header {
  margin: 0 0 10px;
  font-weight: 600;
  color: #333;
  font-size: 36px;
}
.sub_header {
  font-size: 18px;
  color: #333;
  line-height: 1.5em;
  margin-bottom: 30px;
}
.ovf_scroll {
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;
  /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
  &::-webkit-scrollbar{
    width: 8px;
    height: 8px;
  }
  /*定义滚动条轨道 内阴影+圆角*/
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  /*定义滑块 内阴影+圆角*/
  &::-webkit-scrollbar-thumb{
    border-radius: 12px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
    background-color: rgba(144, 147, 153, 0.3);
  }
}
.tab_content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  height: 330px;

}
.tab_item {
  position: relative;
  width: 286px;
  height: 330px;
  padding: 30px 20px 20px;
  margin-right: 30px;
  box-sizing: border-box;
  flex-shrink: 0;
  cursor: pointer;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  text-align: center;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
  border-radius: 6px;
}
.tab_item:last-child {
  margin-right: 0;
}
.tab_item.light {
  border: 1px solid #06318F;
}
.club_name {
  height: 40px;
  margin: 0;
  color: black;
  font-size: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.logo_img {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  margin-top: 30px;
}
.choose_img {
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 32px;
  height: 32px;
}
.choose_box {
  margin-top: 25px;
  text-align: right;
  display: flex;
  justify-content: flex-end;
  .choose_btn {
    display: inline-block;
    padding: 0 10px;
    height: 58px;
    width: 165px;
    display: flex;
    align-items: center;
    font-size: 18px;
    color: white;
    border-radius: 6px;
    cursor: pointer;
    .text {
      flex: 1;
      text-align: center;
    }
  }
  .bg_blue {
    background: #06318F;
  }
  .bg_orange {
    background: #FF5D29;
  }
  .bg_disable {
    background: #888;
    cursor: no-drop;
  }
}
</style>
